<template>
	<view>
		<view class="title">
			动力
		</view>
		<view class="field_list">
			<view v-for="(item,index) in power" :key="index" class="field" :class="powerIndex==index?'power_active':''" @click="powerSelect(index,item.name)">
				{{item.name}}
			</view>
		</view>
		<view class="title">
			外观颜色
		</view>
		<view class="colors">
			<view v-for="(item,index) in outerColors" :key="index" class="field" :class="outerColorIndex==index?'outer_color_active':''" @click="outerColorSelect(index,item)">
				<text class="color_circle" v-if="index>0"></text>
				<text>{{item}}</text>
			</view>
		</view>
		<view class="title">
			内饰颜色
		</view>
		<view class="colors">
			<view v-for="(item,index) in innerColors" :key="index" class="field" :class="innerColorIndex==index?'outer_color_active':''" @click="innerColorSelect(index,item)">
				<text class="color_circle" v-if="index>0"></text>
				<text>{{item}}</text>
			</view>
		</view>
		<view class="bottom">
			<text class="reset" @click="reset">重置</text>
			<text class="contrim" @click="submit">确定</text>
		</view>
	</view>
</template>

<script>
	import {
		getCarModelStyleName
	} from "@/service/api/api";
	export default {
		data() {
			return {
				carConfigData: {
					power:'',
					exteriorColor:'',
					interiorColor:''
				},
				powerIndex:0,
				outerColorIndex:0,
				innerColorIndex:0,
				power:[
					{
						value:'',
						name:'不限'
					},
					{
						value:'',
						name:'前驱'
					},
					{
						value:'',
						name:'后驱'
					},
					{
						value:'',
						name:'四驱'
					}
				],
				outerColors:['不限','白色','黑色','红色','金色','银色','橙色'],
				innerColors:['不限','白色','黑色','红色','金色','银色','橙色']
			}
		},
		created() {
			
		},
		methods: {
			powerSelect(index,name){
				this.powerIndex=index;
				this.carConfigData.power=name
			},
			outerColorSelect(index,name){
				this.outerColorIndex=index;
				this.carConfigData.exteriorColor=name
			},
			innerColorSelect(index,name){
				this.innerColorIndex=index;
				this.carConfigData.interiorColor=name
			},
			reset(){
				this.powerIndex=0;
				this.outerColorIndex=0;
				this.innerColorIndex=0;
				this.carConfigData={
					power:'',
					exteriorColor:'',
					interiorColor:''
				}
			},
			submit(){
				this.$store.commit('selectCarsConfig', {
					power:this.carConfigData.power,
					exteriorColor:this.carConfigData.exteriorColor,
					interiorColor:this.carConfigData.interiorColor
				})
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	body{
		height: 100%;
	}
	.title{
		height: 110rpx;
		line-height: 110rpx;
		background: #F5F6FA;
		color:43425D;
		font-weight: 500;
		font-size: 32rpx;
		margin-bottom: 40rpx;
		padding: 0 30rpx;
	}
	.field_list{
		padding: 0 30rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: nowrap;
		
		.field{
			color:#43425D;
			background: #F5F5F5;
			border-radius: 4rpx;
			padding: 16rpx 50rpx;
			font-size: 28rpx;
		}
		.power_active{
			background: #EBF3FF;
			color:#3B86FC
		}
		
	}
	.colors{
		padding: 0 30rpx 30rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		.field{
			color:#43425D;
			background: #F5F5F5;
			border-radius: 4rpx;
			width: 154rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 28rpx;
			margin:10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.color_circle{
				display: block;
				width:24rpx;
				height: 24rpx;
				border-radius: 12rpx;
				margin-right: 4rpx;
				background: #ffffff;
			}
			&:nth-child(2){
				.color_circle{
					border: 1rpx solid #000;
				}
			}
			&:nth-child(3){
				.color_circle{
					background: #000000 ;
				}
			}
			&:nth-child(4){
				.color_circle{
					background: #F20303 ;
				}
			}
			&:nth-child(5){
				.color_circle{
					background: #D99515 ;
				}
			}
			&:nth-child(6){
				.color_circle{
					background: #D9D9D9 ;
				}
			}
			&:nth-child(7){
				.color_circle{
					background: #FFA414 ;
				}
			}
		}
		.outer_color_active{
			background: #EBF3FF;
		}
	}
	.bottom{
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		position: fixed;
		bottom: 0;
		z-index: 99;
		background: white;
		box-shadow: 0px -4px 8px rgba(116, 169, 255, 0.15);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		.reset{
			color:#3B86FF;
			text-align: center;
			flex: 1;
		}
		.contrim{
			background: #3B86FF;
			color:white;
			text-align: center;
			flex: 1;
		}
	}
</style>
